<template>
  <view class="food-edit">
    <u-tabs :list="tabsList" :current="current" :is-scroll="false" @change="change" bg-color="#FFFFFF"
      bar-style="{ backgroundColor: '#4FCFCE';}" active-color="#4FCFCE" duration="0"></u-tabs>
    <view class="add-food">
      <view class="add-input">
        <u-input v-model="name" placeholder="请输入菜名" :type="type" :border="true" style="width: 600rpx;" />
      </view>
      <view class="add-input">
        <view class="">
          约
        </view>
        <u-input v-model="weight" placeholder="请输入质量" :type="type" :border="true" style="width: 500rpx;" />
        <view class="">
          g
        </view>
        <view class="add-btn" @click="addFood">
          <u-icon name="plus" color="#D0FFFF" size="28"></u-icon>
        </view>
      </view>
      <view class="new-food">
        <view class="food-title">
          {{tableList[current]}}
        </view>
        <view class="" style="display: flex;justify-content: center;align-items: center;" v-for="(item,index) in List"
          :key="index">
          <view class="food">
            <view class="food-name">
              {{item.name}}
            </view>
            <view class="food-weight">
              {{item.weight}}
            </view>
          </view>
          <button type="warn" style="width: 20%;margin-left: 10rpx;" @click="removeFood(index)">删除</button>
        </view>
      </view>
    </view>
    <view class="edit-food">
      <button class="edit-btn" @click="submitFood">完成</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tableList: ["早餐列表", "午餐列表", "晚餐列表"],
        breakfastList: [],
        lunchList: [],
        dinnerList: [],
        List: [],
        name: '',
        weight: '',
        tabsList: [{
          name: '早餐'
        }, {
          name: '午餐'
        }, {
          name: '晚餐'
        }],
        current: 0,
        day: '',
        diet_id: ''
      };
    },
    onLoad(option) {
      console.log(option);
      // this.current = option.id
      this.day = option.day
      this.diet_id = option.id
      let list = JSON.parse(option.list)
      console.log(list);
      if (list.length > 0) {
        this.breakfastList = list?.[0]?.breakfastList
        this.lunchList = list?.[0]?.lunchList
        this.dinnerList = list?.[0]?.dinnerList
      }
      console.log(this.breakfastList);
      this.change(this.current)
    },
    methods: {
      change(index) {
        this.current = index;
        if (this.current == 0) {
          this.List = this.breakfastList
        } else if (this.current == 1) {
          this.List = this.lunchList
        } else if (this.current == 2) {
          this.List = this.dinnerList
        }
      },
      addFood() {
        if (!this.name) {
          uni.showToast({
            title: '还没填写菜品哦',
            icon: 'error'
          })
          return
        } else if (!this.weight) {
          uni.showToast({
            title: '还没填写菜品哦',
            icon: 'error'
          })
          return
        }
        let food = {}
        food = {
          name: this.name,
          weight: '约' + this.weight + 'g'
        }
        if (this.current == 0) {
          this.breakfastList.push(food)
          this.List = this.breakfastList
          console.log(this.List);
        } else if (this.current == 1) {
          this.lunchList.push(food)
          this.List = this.lunchList
          console.log(this.List);
        } else if (this.current == 2) {
          this.dinnerList.push(food)
          this.List = this.dinnerList
          console.log(this.List);
        }
        this.name = ''
        this.weight = ''
      },
      removeFood(index) {
        this.List.splice(index, 1)
      },
      async submitFood() {
        uniCloud.callFunction({
          name: "diet",
          data: {
            flag: 3,
            diet_id: this.diet_id,
            id: this.vuex_user.id
          }
        }).then(res => {
          console.log(res);
          let foodObj = {
            day: this.day,
            breakfastList: this.breakfastList,
            lunchList: this.lunchList,
            dinnerList: this.dinnerList
          }
          if (res.result.data.length === 0) {
            uniCloud.callFunction({
              name: "diet",
              data: {
                flag: 4,
                diet_id: this.diet_id,
                id: this.vuex_user.id,
                foodList: [foodObj]
              }
            }).then(res => {
              console.log(res);
              uni.navigateBack()
            })
            return
          }
          let list = res.result.data[0]
          console.log(list);
          if (list.foodList) {
            let existListIndex = list.foodList.findIndex((item) => {
              return item.day == this.day;
            });
            if (existListIndex !== -1) {
              // 替换 list.foodList 中的匹配项
              list.foodList[existListIndex] = foodObj;
            } else {
              console.log(foodObj);
              list.foodList.push(foodObj);
            }
          } else {
            list.foodList = [foodObj];
          }
          uniCloud.callFunction({
            name: "diet",
            data: {
              flag: 5,
              foodList: list.foodList,
              diet_id: this.diet_id,
              id: this.vuex_user.id
            }
          }).then(res => {
            console.log(res);
            uni.navigateBack()
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .food-edit {
    .add-food {
      padding: 30rpx;

      .add-input {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10rpx 0;

        .add-btn {
          width: 70rpx;
          height: 70rpx;
          background-color: #00BEC6;
          border: 1rpx solid #888;

          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .new-food {
        padding: 20rpx 0;

        .food-title {
          font-size: 35rpx;
          font-weight: 600;
          color: #000;
        }

        .food {
          margin: 20rpx;
          width: 70%;
          height: 100rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30rpx;
          font-weight: 600;
          color: #000;
          border: 1rpx solid #888;

          .food-name {
            margin-right: 100rpx;
          }
        }
      }
    }

    .edit-food {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 170rpx;
      background-color: #FFFFFF;

      .edit-btn {
        background-color: #00BEC6;
        border-radius: 50rpx;
        color: #DBFFFF;
        margin: 20rpx;
      }
    }
  }
</style>